<template>
	<view class="face-analysis-page">

		<!-- 标题区域 -->
		<view class="intro-text">
			<text class="welcome">欢迎来到 I'M <br> 为了更好的使用体验 <br> 建议进行面容分析</text>
		</view>

		<!-- 插图占位（替换你的贴图） -->
		<image class="face-img" src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/042b32163530a848eca7810c5d102e9206image.png"></image>

		<!-- 分析按钮 -->
		<view class="btn-analysis">
			面容分析
		</view>

		<!-- 提示文字 -->
		<view class="tips">
			为了保证分析结果的准确性，请在素颜状态下进行测试哦～
		</view>

		<!-- 跳过按钮 -->
		<view class="btn-skip" @click="skip">
			跳过
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import sheep from '@/sheep';

// 点击分析
const analyzeFace = () => {
	sheep.$router.go('/pages/faceAnalysis/start');
};

// 跳过
const skip = () => {
	sheep.$router.go('/pages/index/index');
};
</script>

<style scoped lang="scss">
.face-analysis-page {
	padding-top: 100rpx;
	width: 100%;
	height: 100vh;
	background: linear-gradient(to bottom, #ffdae6, #e4daff, #fff2c8);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.intro-text {
	text-align: left;
	.welcome {
		display: block;
		text-align: left;
		font-size: 50rpx;
		line-height: 100rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.suggest {
		font-size: 32rpx;
		color: #666;
		line-height: 1.4;
	}
}

.face-img {
	height: 750rpx;
}

.btn-analysis {
	width: 70%;
	height: 90rpx;
	background: linear-gradient(to right, #ffdae6, #f6a8d4);
	border-radius: 45rpx;
	box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
	font-size: 32rpx;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
}

.tips {
	font-size: 26rpx;
	color: #888;
	text-align: center;
	padding: 0 10%;
}

.btn-skip {
	position: fixed;
	right: 40rpx;
	bottom: 60rpx;
	background-color: rgba(0,0,0,0.05);
	padding: 20rpx 50rpx;
	border-radius: 30rpx;
	color: #333;
	font-size: 30rpx;
}
</style>
